<template>
  <div class="ex-models" v-if="modelsList && modelsList.length > 0 ">
    <div class="em-title">
      EXEED Models
    </div>
    <div class="em-content">
      <div class="swiper mySwiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in modelsList" :key="index">
            <div class="em-card">
              <div class="em-top" @click="$router.push(`${item.path}${item.id}`)">
                <img :src="item.thumbnailUrl">
              </div>
              <div class="em-title-s">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="swiper-button-next"></div> -->
        <!-- <div class="swiper-button-prev"></div> -->
        <!-- <div class="swiper-pagination"></div> -->
      </div>
      <div class="swiper-button-next" @click="nextPic">
<!--        <div>-->
<!--          <svg fill="#ffffff" height="50px" width="50px" version="1.1" id="XMLID_287_"-->
<!--               xmlns="http://www.w3.org/2000/svg"-->
<!--               xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g>-->
<!--            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>-->
<!--            <g id="SVGRepo_iconCarrier"> <g id="next"> <g> <polygon opacity=".15"-->
<!--                                                                    points="6.8,23.7 5.4,22.3 15.7,12 5.4,1.7 6.8,0.3 18.5,12 "></polygon> </g> </g> </g></svg>-->
<!--        </div>-->
      </div>
    </div>
<!--    <div class="em-more-div-line">-->
<!--      <div class="em-more-btn" @click="$router.push(`/AllModels`)">-->
<!--        All Models-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue';
import Swiper from 'swiper';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  time: {
    type: String,
    required: false,
  },
});
const modelsList = ref([
  {
    url: `/images/car/car_vx.png`,
    title: 'VX'
  },
  {
    url: `/images/car/car_rx.png`,
    title: 'RX'
  },
  {
    url: `/images/car/car_txl.png`,
    title: 'TXL'
  },
  {
    url: `/images/car/car_lx.png`,
    title: 'LX'
  },
  {
    url: `/images/car/car_es.png`,
    title: 'ES'
  },
  {
    url: `/images/car/car_et.png`,
    title: 'ET'
  },

]);

// console.log(props.data)
modelsList.value = props.data

let count = 0;
let swiper2 = ref()
const nextPic = () => {
  // count++;
  // let num = count % (modelsList.value.length - 4);
  // swiper2.value.slideTo(num);
  swiper2.value.slideNext();
}

onMounted(() => {
  swiper2.value = new Swiper(".mySwiper2", {
    slidesPerView: "auto",
    // centeredSlides: false,
    // spaceBetween: 30,
    // pagination: {
    //     el: ".swiper-pagination",
    //     type: "fraction",
    // },
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
  // setInterval(() => {
  //     count+=4;
  //     let num = count % modelsList.value.length;
  //     swiper2.value.slideTo(num);
  // }, 3000);
})
</script>
<style scoped lang="scss">
.ex-models {
  position: relative;
  width: 1600px;
  height: 550px;
  background: url("/images/car/组 254.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 112px 160px;

  .em-title {
    font-size: 64px;
    // color: #fff;
    font-weight: 600;
    margin-bottom: 112px;

    background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 70%, #BB916C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .em-content {
    width: 100%;

    // padding: 0 80px;
    .mySwiper2 {
      width: 100%;
    }

    .swiper-slide {
      width: 320px !important;
    }

    .em-card {
      cursor: pointer;
      width: 100%;
      text-align: center;

      .em-top {
        width: 264px;
        height: 176px;
        // background-color: rgba(255, 255, 255, 0.25);

        img {
          padding-top: 35px;
          width: 300px;
          transition: all 0.6s;
        }

        img:hover {
          transform: scale(1.05);
        }
      }

      .em-title-s {
        width: 100%;
        text-align: center;
        height: 64px;
        line-height: 64px;
        font-size: 18px;
        color: #fff;
      }
    }
  }

  .swiper-button-next {
    position: absolute;
    right: 80px;
    z-index: 1000;
    top: 310px;
    width: 64px;
    height: 240px;
    color: rgba(255, 255, 255, 0.15);
    border-left: 2px solid rgba(255, 255, 255, 0.15);

    div {
      margin-top: 95px;
      margin-left: 10px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.15);
    }
    /*svg {*/
    /*  width: 50px;*/
    /*  height: 50px;*/
    /*}*/
  }

  .swiper-button-next:after {
    font-size: 50px !important;
    color: rgba(255, 255, 255, 0.15);
  }

  .em-more-div-line {
    padding-left: 650px;

    .em-more-btn {
      margin-top: 80px;
      width: 300px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: rgb(199, 142, 102, 0.08);
      border-bottom: 4px solid #C78E66;
      font-size: 16px;
      color: #fff;
      user-select: none;
      cursor: pointer;
    }

    .em-more-btn:hover {
      background: rgb(199, 142, 102, 0.58);
    }
  }

}
</style>
